<template>
  <div class="Rank">
    <div class="list" v-for="item in topList" :key="item.title">
      <h3>{{ item.title }}</h3>
      <div class="rank-list" v-for="itemList in item.list" :key="itemList.topId" @click="selectRank(itemList)">
        <div class="item-info">
          <h4>{{ itemList.label }}</h4>
          <ul>
            <li v-for="(musicItem, i) in itemList.song" :key="musicItem.songId">
              <span>{{ i + 1 }}.{{ musicItem.title }}-{{
                  musicItem.singerName
                }}</span>
            </li>
          </ul>
        </div>
        <div class="item-img">
          <img :src="itemList.picUrl" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "Rank",
    data() {
      return {
        topList: [],
      };
    },
    created() {
      this.getTopList();
    },
    methods: {
      getTopList() {
        axios
          .get("/jsososo/top/category", {
            params: {
              showDetail: 1,
            },
          })
          .then((res) => {
            // console.log(res.data);
            this.topList = res.data.data;
            console.log(this.topList);
          })
          .catch((err) => {
            console.error(err);
          });
      },
      selectRank(itemList) {
        console.log(itemList);
        const id = itemList.topId;
        this.$router.push({
          name: "RankListDetail",
          params: {
            id
          },
        });
      },
    },
  };
</script>

<style scoped>
  h3 {
    margin-left: 10px;
  }

  h4 {
    margin: 0;
  }

  ul {
    margin-top: 10px;
  }

  .rank-list {
    display: flex;
    margin: 0 10px;
    padding: 10px 0;
    border-top: 1px solid rgb(48, 48, 48);
    align-items: center;
  }

  .item-info {
    width: 270px;
    height: 120;
    /* margin: 0 10px; */
    overflow: hidden;
  }

  .item-info span {
    font-size: 7px;
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 100%;
    /*限制宽度 可设px*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
  }

  .item-img {
    justify-content: flex-end;
    /* margin-right: 10px; */
  }

  .item-img img {
    width: 100px;
    height: 100px;
  }
</style>